Actions and Queries

In order to have views exchange data with the server-side, you can use the Action and Query helper functions.

import { html, Component } from './rebase-ui-runtime'
import { Action, Query } from './rebase-ui-utils'
import VLayout from './components/VLayout'
import Button from './components/Button'

export default class MyView extends Component {
  constructor (props) {
    super(props)
    this.state = {
      counter: 0
    }
  }

  componentDidMount = () => {
    this.getCounterValue()
  }

  getCounterValue = () => {
    Query('get-counter', {
      no: 'props',
      required: 'here'
    }).then(res => {
      console.log(`responsee from server:`, res)
      this.setState({
        counter: res.counter
      })
    })
  }

  incrementCounter = () => {
    Action('increment-counter', {
      counter: this.state.counter + 1
    }).then(this.getCounterValue)
  }

  render = () => {
    return `
      <${VLayout}>
        <${Text} text="${this.state.counter}" />
        <${Button} onClick=${this.incrementCounter}>Increase Counter</${Button}>
      <${VLayout}>
    `
  }
}

The type argument of an Action or Query and the data argument can also be combined into a single object:

Action({
  action: 'increment-counter',
  counter: this.state.counter + 1
})
Query({
  query: 'get-counter',
  no: 'props',
  required: 'here'
})

Please note that you can only call an Action or Query with just the type nominator when using the merged object approach.

Query({
  query: 'current-things'
})